<template>
	<div class="cinema">
		<ul class="yeye">
			<li>全城
				<i class="fa fa-caret-down"></i>
			</li>
			<li>品牌
				<i class="fa fa-caret-down"></i>
			</li>
			<li>特色
				<i class="fa fa-caret-down"></i>
			</li>
		</ul>
		<div class="list">
			<ul>
				<li v-for='item in cinemaList' :key='item.id'>
					<p>
						<span>{{item.name}}</span>
						<span class="price">{{item.price}}</span>
						<span class="price-desc">元起</span>
					</p>
					<p class="address">
						<span>{{item.address}}</span>
						<span>>{{item.distance}}</span>
					</p>
					<p class="tips">
						<span>小吃</span>
						<span>折扣卡</span>
					</p>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'CinemaName',
		methods:{
			getCinemaData(){
				var that=this;
				axios.get('/mock/api.json')
				  .then(function (response) {
				    console.log(response);
					if(response.status==200){
						if(response.data && response.data.cinemaList){
							that.cinemaList=response.data.cinemaList;
						}
					}
				  })
				  .catch(function (error) {
				    console.log(error);
				  });
			}
		},
		created(){
			this.getCinemaData();
		},
		data() {
			return {
				cinemaList:[]
				// cinemaList: [{
				// 		"id": 1,
				// 		"name": "大地影院延庆金锣湾店",
				// 		"price": 38.5,
				// 		"address": "延庆区北街39号H座首层",
				// 		"distance": 100
				// 	}, {
				// 		"id": 2,
				// 		"name": "燕山影剧院",
				// 		"price": 37.5,
				// 		"address": "房山区燕山岗南路3号",
				// 		"distance": 120
				// 	},
				// 	{
				// 		"id": 3,
				// 		"name": "万达影城昌平保利光魔店",
				// 		"price": 37.9,
				// 		"address": "昌平区鼓楼南街佳莲时代广场四层",
				// 		"distance": 80
				// 	},
				// 	{
				// 		"id": 4,
				// 		"name": "门头沟影剧院",
				// 		"price": 30.9,
				// 		"address": "门头沟区新桥大街12号",
				// 		"distance": 110
				// 	}
				// ]
			}
		},

	}
</script>

<style scoped>
	.cinema .yeye li {
		margin-top: 50px;
		display: inline-block;
		width: 33%;
		text-align: center;
		font-weight: 500;
		height: 40px;
		line-height: 40px;
		border-bottom: 1px solid #ccc;
	}

	.list li {
		padding: 10px;
		border-bottom: 1px solid #ccc;
	}

	.price {
		color: #E54747;
		margin: 0px 5px;
	}

	.price-desc {
		color: #E54747;
		font-size: 12px;
	}

	.address span {
		font-size: 12px;
		color: #999;
	}

	.address span:last-child {
		float: right;
	}

	.tips span {
		border: 1px solid #f90;
		color: #f90;
	}

	.tips {
		margin: 10px 0;
	}
</style>
